<template>
	<div>
		<van-nav-bar title="提交订单" left-arrow @click-left="$utils.back($route.path)" />
		<div class="nav-top pt-24">

			<!-- 订单顶部 -->
			<div class="mg-24 bg-white nav_address">
				<div class="address pb-24" v-if="IsCostType === 3">
					<div>
						<img src="@/assets/images/physio/address1.png" />
					</div>
					<div class="address_msg">
						<div class="fs-28 color-black2">{{ DisStoreAddress }}</div>
						<svg-icon icon-class="right" class="fs-24 ml-10 mt-16" />
					</div>
				</div>
				<div v-else class="address pb-24" @click="addressShow = true">
					<div>
						<img src="@/assets/images/physio/address1.png" />
					</div>
					<div class="address_msg">
						<div v-if="address.ProvinceName">
							<div class="fs-28 color-black2">{{ address.ProvinceName }}{{ address.CityName }}{{ address.AreaName }}{{
								address.StreetName }}{{ address.ContactAddress }}</div>
							<div class="color-gray7"><span>{{ address.ContactName }}</span>{{ address.ContactTel }}</div>
						</div>
						<div v-else class="h-86 fs-28 color-black2">{{ serviceAddress }}</div>
						<svg-icon icon-class="right" class="fs-24 ml-10 mt-32" @goPage="goaddress" />
					</div>
				</div>
				<div class="serve_time ptb-24 mb-24">
					<div>
						<img src="@/assets/images/physio/time.png" />
					</div>
					<div class="address_msg" @click="showTimeSelect">
						<div>
							<div class="fs-28 color-black2"><span>服务时间</span> {{ serviceTime }}</div>
							<div class="color-gray7">技师预计会在服务前10分钟到达</div>
						</div>
						<svg-icon icon-class="right" class="fs-24 ml-10 mt-24" />
					</div>

				</div>
				<div class="serves fs-28">
					<img src="@/assets/images/physio/technicist.png" /><span>服务技师</span>
					<img-box class="classImg" :isBr50="isBr50" :img-url="Photo" /><span>{{ name }}</span>
				</div>
			</div>

			<!-- 订单内容 -->
			<div class="bg-white mg-24 pd-24 br-16">
				<div class="flex flex-s-c">
					<div class="fs-28 fw-b">服务项目</div>
					<div class="color-gray7">预计耗时{{ totalDuration }}</div>
				</div>
				<div v-if="serveList && serveList.length > 0">
					<div v-for="(item, index) in serveList" :key="index">
						<!--<service :info="item"></service>-->
						<div class="service_item ptb-24">
							<div class="service_img">
								<img-box class="classImg br-16 ofh" :img-url="item.V_ThumbnailUrl410" />
							</div>
							<div class="ml-24 service_content">
								<div>
									<div class="service_name fw-b">{{ item.V_Title }}</div>
									<div class="right-box-text color-gray7" v-if="item.V_tags_list && item.V_tags_list.length > 0">
										<span v-for="(items, index) in item.V_tags_list" :key="index">{{ items.Name }}</span>
									</div>
								</div>
								<div class="pricenum mt-46">
									<div><span class="service_unit">￥</span><span class="service_price">{{ item.V_GradePrice ?
										item.V_GradePrice.toFixed(2) : '0' }}</span></div>
									<p class="fs-28">x{{ item.Amount }}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex flex-fe-c pt-24">
					<div class="mt-8">合计</div>
					<div class="order-price"><span class="fs-28">￥</span><span class="fs-36">{{ total ? total.toFixed(2) :
						'' }}</span></div>
				</div>
			</div>
			<div class="pb-220">
				<div class="bg-white pd-24 mg-24 br-16" v-if="IsCostType !== 3">
					<div class="pb-24 mb-24 travel-title">
						<div class="fs-28 fw-b">出行方式</div>
						<van-radio-group v-model="radio" class="flex" @change="travelWayChange">
							<van-radio name="1" :disabled="IsMustCar" class="mr-24 fs-28" checked-color="#24c373">公交/地铁</van-radio>
							<van-radio name="0" class="fs-28" checked-color="#24c373">滴滴/出租</van-radio>
						</van-radio-group>
					</div>

					<div class="pb-24 mb-24 travel color-gray7">
						<span v-if="radio == 0">总距离{{ distance }}KM, {{ carDescription }}</span>
						<span v-else>总距离{{ distance }}KM,{{ busDescription }}</span>
					</div>
					<div class="travel">
						<div class="fs-28 fw-b">出行费用</div>
						<div class="ordermsg_total"><span class="fs-28">￥</span><span class="fs-36">{{ travelPay ?
							travelPay.toFixed(2) : 0 }}</span></div>
					</div>
				</div>
				<div class="bg-white pd-24 mg-24 br-16 travel fs-28" @click="openCouponList()">
					<div>优惠券</div>
					<div class="flex flex-v-c" v-if="userCouponList && userCouponList.length > 0">
						<div v-if="couponValue != 0">
							<span class="fs-28 color-primary1">-￥</span><span class="fs-36 color-primary1">{{ couponValue }}</span>
							<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goCoupon" />
						</div>
						<div v-else>选择优惠券 <svg-icon icon-class="right" class="fs-24 ml-10" /></div>
					</div>
					<div v-else class="color-black2">暂无优惠券<svg-icon icon-class="right" class="fs-24 ml-10" /></div>

				</div>

				<div class="bg-white pd-24 mg-24 br-16">
					<p class="fs-28">买家留言(选填)</p>
					<van-field v-model="orderRemark" type="textarea" class="fs-28 mt-15 remark" placeholder="请在此处填写留言~" />
				</div>
			</div>

			<!-- 底部确认订单 -->
			<div class="fixed-bottom">
				<div class="flex flex-s-s ptb-20 plr-25 bg-white bottom-box">
					<div class="flex">
						<span class="fs-24 color-dark mt-18">需付金额</span>
						<span class="fs-28 color-primary3 mt-16">￥</span> <span class="color-primary3 fs-36  fw-600 mt-5">{{ totalPay
							?
							totalPay.toFixed(2) : '0' }}</span>
					</div>
					<button class="bg-primary color-white placeorder" @click.stop="submitOrder">立即下单</button>
				</div>
			</div>
		</div>

		<van-popup v-model="showCoupon" position="bottom">
			<div class="coupon-box">
				<h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
				<van-tabs animated>
					<van-tab :title="'未使用(' + userCouponNum + ')'">
						<van-radio-group v-model="userCouponListRadio">
							<ul class="coupon-list mg-30 mb-0">
								<li v-for="(item, index) in userCouponList" :key="index" class="coupon-item mb-30 flex-s-c"
									@click="userCouponListRadio = index">
									<div class="item flex-s-c flex-1 br-12"
										:style="{ backgroundImage: 'url(' + require('@/assets/images/physio/coupon-li-bg.png') + ')' }">
										<div class="left-box  fs-72   flex-center ">
											<div v-show="item.V_PrivilegeWay !== 0" class="tac">
												<span>{{ parseInt(item.CouponPrivilegeValue) }}</span>
												<span v-show="item.CouponPrivilegeValue % 1" class="fs-24">{{ item.CouponPrivilegeValue ?
													item.CouponPrivilegeValue.toFixed(2) : '' }}</span>
												<span class="fs-24">元</span>
												<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
													item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
											</div>
											<div v-show="item.V_PrivilegeWay === 0" class="tac">
												<span>{{ parseInt(item.CouponPrivilegeValue / 10) }}</span>
												<span v-show="(item.CouponPrivilegeValue / 10) % 1" class="fs-24">.{{ item.CouponPrivilegeValue /
													10
												}}</span>
												<span class="fs-24">折</span>
												<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
													item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
											</div>
										</div>
										<div class="right-box flex-s-c flex-1 pl-30 pr-20 pos-r">
											<div>
												<h2 class="fs-32 fw-b lh text-show-line-1 mb-10">{{ item.V_Name }}</h2>
												<!--<p v-show="item.V_LimitMode === 0" class="fs-32 color-dark">全场通用</p>-->
												<!--<p v-show="item.V_ProductCategoryIds||item.V_ProductIds||item.V_StoreIds" class="fs-32 color-dark">{{ item.StoreNames }}{{ item.StoreNames?',':'' }}{{ item.ProductNames||item.ProductCategoryNames }}</p>-->
												<p class="fs-24 color-gray-light">{{ item.V_UseStartTime }}至{{ item.V_UseEndTime }}</p>
											</div>
											<van-radio checked-color="#24c373" :name="index" class="pr-20 flex-s-0" />
										</div>
									</div>
								</li>
							</ul>
						</van-radio-group>
					</van-tab>
					<van-tab :title="'可兑换(' + changeList.length + ')'">
						<van-radio-group v-model="changeListRadio">
							<ul class="coupon-list mg-30 mb-0">
								<li v-for="(item, index) in changeList" :key="index" class="coupon-item mb-30 flex-s-c"
									@click="changeListRadio = index">
									<div class="item flex-s-c flex-1 br-12"
										:style="{ backgroundImage: 'url(' + require('@/assets/images/physio/coupon-li-bg.png') + ')' }">
										<div class="left-box  fs-72   flex-center ">
											<div v-show="item.V_PrivilegeWay !== 0" class="tac">
												<span>{{ parseInt(item.CouponPrivilegeValue) }}</span>
												<span v-show="item.CouponPrivilegeValue % 1" class="fs-24">{{ item.CouponPrivilegeValue }}</span>
												<span class="fs-24">元</span>
												<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
													item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
											</div>
											<div v-show="item.V_PrivilegeWay === 0" class="tac">
												<span>{{ parseInt(item.CouponPrivilegeValue / 10) }}</span>
												<span v-show="(item.CouponPrivilegeValue / 10) % 1" class="fs-24">.{{ item.CouponPrivilegeValue /
													10
												}}</span>
												<span class="fs-24">折</span>
												<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ?
													item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
											</div>
										</div>
										<div class="right-box flex-s-c flex-1 pl-30 pr-20">
											<div>
												<h2 class="fs-32 fw-b lh text-show-line-1">{{ item.Name }}</h2>
												<p class="fs-24 color-gray-light">{{ item.V_UseStartTime }}-{{ item.V_UseEndTime }}</p>
												<p class="fs-24 color-gray-light">所需{{ $IntegralAlias }}：{{ item.NeedIntegral }}</p>
											</div>
											<van-radio :name="index" class="pr-20 flex-s-0" />
										</div>
									</div>
								</li>
							</ul>
						</van-radio-group>
					</van-tab>
				</van-tabs>
				<div class="pd-24 flex-center">
					<van-button class="color-primary1 bg-white flex-1 br-44 mr-20" native-type="submit"
						@click="noUseCoupon">不使用优惠券</van-button>
					<van-button class="solid-btn flex-2 br-44 ml-20" native-type="submit" @click="choseCoupon">确定</van-button>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="addressShow" position="bottom" class="bottom-popup">
			<addressList class=" bg-gray" style="min-height:100vh" @colseAdress="closePopup" @changeAddress="changeAddress" />
		</van-popup>
		<van-popup v-model="timeSelect" position="bottom" class="bottom-popup">
			<van-picker title="选择服务时间" :columns="columns" show-toolbar @confirm="onConfirm" @cancel="onCancel" />
		</van-popup>
	</div>
</template>
<script>
import service from 'components/physio/service.vue'
import { GetBookHomeSettingInfo, GetArtificerInfo, CalculateBookHomeOrderTripCost, GetCanBookHomeTimes, SubmitBookHomeOrder, GetArtificerTripCostType } from 'api/physio'
import addressList from 'components/address'
import imgBox from 'components/imgBox'
import { GetProductDataBySubmit } from 'api/product'
import utils from 'utils/utils'
import { timeout } from 'q'
export default ({
	components: {
		service, addressList, imgBox
	},
	data() {
		return {
			id: 0, //技师id
			name: '', //技师名称
			Photo: '', //头像
			serviceAddress: '请选择服务地址',
			serviceTime: '请选择服务时间', //服务时间
			orderRemark: '', //买家留言
			timeSelect: false,
			showCoupon: false, // 优惠券弹出层
			userCouponList: [], // 未使用
			userCouponListRadio: 0,
			changeList: [], // 可兑换
			changeListRadio: 0,
			userCouponNum: 0, // 可使用优惠券的数量
			radio: '0', //出行方式 1公交/地铁 0滴滴/出租
			addressShow: false,
			address: {},
			couponValue: 0,
			// 请求上传数据
			requestData: { IsPayStore: true }, // 请求优惠券接口上传data
			requestData2: { PayWay: 1 }, // 请求订单创建接口上传data
			requestData3: {}, // 余额支付接口上传data
			requestData4: {}, // 参数为商户id
			busDescription: '', //公交说明
			carDescription: '', //车说明
			serveList: [], //临时购物车数据
			CouponPrivilegeValue: '',
			//total: 0, //服务总金额
			totalDuration: '', // 服务耗时
			duration: 0, //服务耗时(分钟数)
			//totalPay: 0, //订单总金额(服务总金额+出行费用-优惠价格)
			travelPay: 0, //出行费用
			Lng: 0,
			Lat: 0,
			requsetData: {
				remark: '',
				addressId: 0,
				carIds: ''
			},
			isBr50: true, //用来判断图片圆形
			columns: [], //可选时间数组
			IsMustCar: false, //是否只能打车
			requestData5: {}, //获取出行方式传参
			distance: 0, //总距离
			IsCostType: 0, //服务方式 3代表预约到店不需要计算出行费用
			DisStoreAddress: '', //所属门店地址
		}
	},
	async created() {
		this.id = this.$route.params.id
		await GetArtificerInfo({ artifcerUserId: this.id }).then(res => {
			if (res) {
				this.requestData5.supplierId = res.Data.DisSupplierId
				this.name = res.Data.Name
				if (res.Data.Photo != '') {
					this.Photo = res.Data.Photo.split(',')[0]
				}
				this.DisStoreAddress = res.Data.DisStoreAddress
				this.Lng = res.Data.DisStoreLng
				this.Lat = res.Data.DisStoreLat
			}
		})
		await this.GetArtificerTripCostType()
		this.GetProductDataBySubmit()
		setTimeout(() => {

			this.GetBookHomeSettingInfo()
			this.GetTotal()
		}, 500)
	},
	computed: {
		total() {
			let _total = 0
			if (this.serveList.length > 0) {
				this.serveList.forEach(ele => {
					_total += ele.V_GradePrice * ele.Amount
				});
			}
			return _total
		},

		totalPay() {
			let _totalPay = this.total + this.travelPay - this.couponValue
			return _totalPay
		},

	},
	methods: {
		GetArtificerTripCostType() {
			GetArtificerTripCostType().then(res => {
				if (res.State) {
					this.IsCostType = res.Data
					if (this.IsCostType === 3) {
						this.GetCanBookHomeTimes()
					}
				}
			})
		},
		travelWayChange() {
			console.log(this.serviceTime, "")
			if (this.serviceTime === '请选择服务时间') {
				this.$toast('请选择服务时间')
			} else {
				this.CalculateBookHomeOrderTripCost()
			}
		},
		//打开地址弹窗
		goaddress() {
			this.addressShow = true
		},
		closePopup() {
			this.addressShow = false
		},
		changeAddress(address) {
			// 更改地址
			this.address = address
			this.requsetData.addressId = address.ID
			this.addressShow = false
			if (address.Lng === 0 || address.Lat === 0) {
				this.$toast.fail({
					message: '定位失败，请定位',
					icon: 'close'
				})
			}
			this.Lng = address.Lng
			this.Lat = address.Lat
			this.columns = []
			if (this.Lng !== 0 && this.Lat !== 0) {
				this.GetCanBookHomeTimes()
			} else {
				this.$toast("该地址没有定位,请重新定位")
			}
		},
		//可预约时间显示
		showTimeSelect() {
			if (this.Lng === 0 || this.Lat === 0) {
				this.$toast.fail('请选择服务地址')
				return
			}
			this.$nextTick(() => {
				if (this.columns.length === 0) {
					this.$toast('该技师暂时无法为您服务，您可选择其他技师服务')
					return
				}
			})
			this.timeSelect = true
		},
		//获取可预约时间
		GetCanBookHomeTimes() {
			this.serviceTime = '请选择服务时间'
			this.radio = '0'
			this.travelPay = 0
			const data = {}
			data.artificerUserId = this.id
			data.lng = this.Lng
			data.lat = this.Lat

			GetCanBookHomeTimes(data).then(res => {

				this.columns = []
				if (res.Data) {
					res.Data.forEach(ele => {
						const time = {}
						const timeList = []

						const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
						const myDate = new Date(Date.parse(ele.BookDay))
						const zhouji = weekDay[myDate.getDay()]
						var date = new Date();
						var year = date.getFullYear();
						var month = date.getMonth() + 1;
						var strDate = date.getDate();
						if (month >= 1 && month <= 9) {
							month = "0" + month;
						}
						if (strDate >= 0 && strDate <= 9) {
							strDate = "0" + strDate;
						}

						var day = year + "-" + month + "-" + strDate
						var today = ''
						if (ele.BookDay === day) {
							today = '今天'
						} else {
							today = '明天'
						}
						time.text = today + '(' + zhouji + ')'
						ele.BookTime.forEach(item => {
							timeList.push({ text: item.TimeStr, value: item.Time, IsMustCar: item.IsMustCar })
						})
						time.children = timeList
						console.log(time, 'fdfdfd')
						this.columns.push(time)
					})
				}
			})
		},
		//获取临时购物车数据
		GetProductDataBySubmit() {
			const data = {}
			data.isTempCar = true,
				GetProductDataBySubmit(data).then(res => {
					if (res.Data.List && res.Data.List.length > 0) {
						const list = res.Data.List
						if (list[0].CarList) {
							this.serveList = list[0].CarList
						}
						//list.forEach((ele) => {
						//	ele.CarList.forEach((e) => {
						//		this.serveList.push(e)  //促销使用 价格需要怎么判断?
						//	})
						//})
					}
					if (res.Data.CouponList && res.Data.CouponList.length > 0) {
						this.userCouponList = res.Data.CouponList
						this.userCouponList.forEach((ele) => {
							ele.V_UseStartTime = this.$utils.getNewData(ele.V_UseStartTime, 0)
							ele.V_UseEndTime = this.$utils.getNewData(ele.V_UseEndTime, 0)
						})
						this.userCouponNum = res.Data.CouponList.length;
					}
				})
		},
		//获取服务总金额 时长
		GetTotal() {
			if (this.serveList.length > 0) {
				this.serveList.forEach(ele => {
					this.duration += ele.ServiceDuration * ele.Amount
				});
			}
			const timeh = Math.floor(this.duration / 60);
			const timem = this.duration % 60;
			if (timeh > 0) {
				this.totalDuration = timeh + '小时' + timem + '分钟'
			} else {
				this.totalDuration = timem + '分钟'
			}
			if (this.IsCostType !== 3) {
				this.CalculateBookHomeOrderTripCost()
			}
		},

		//获取出行方式说明
		GetBookHomeSettingInfo() {
			GetBookHomeSettingInfo(this.requestData5).then(res => {
				this.carDescription = res.Data.CarDescription
				this.busDescription = res.Data.BusDescription
			})
		},

		///获取出行费用
		CalculateBookHomeOrderTripCost() {
			this.noUseCoupon()
			const data = {}
			data.tripType = this.radio
			data.bookTime = this.serviceTime
			data.artificerUserId = this.id
			data.lng = this.Lng
			data.lat = this.Lat
			if (data.lng != 0 && data.lat != 0) {
				CalculateBookHomeOrderTripCost(data).then(res => {
					if (res.Data) {
						this.travelPay = res.Data.Cost
						this.distance = res.Data.Distance.toFixed(2)
					}
				})
			}

		},
		// 选择优惠券
		openCouponList() {
			this.showCoupon = true
			this.focusStatus = false
			if (this.price === '') {
				Toast({
					message: '请先输入订单金额'
				})
				this.focusStatus = true
				return
			} else {
				this.requestData.PriceSum = this.price
			}
		},
		goCoupon() {
			this.showCoupon = true
		},

		// 不使用优惠券
		noUseCoupon() {
			this.userCouponListRadio = 0
			this.minOrderPrice = 0
			this.changeListRadio = 0
			this.CouponPrivilegeValue = 0
			this.couponValue = 0
			this.requestData2.CouponDetailId = 0
			this.requestData2.CouponId = 0
			this.showCoupon = false
		},
		// 确定选择优惠券
		choseCoupon() {
			this.showCoupon = false
			const list = this.active ? this.changeList : this.userCouponList
			const radio = this.active ? this.changeListRadio : this.userCouponListRadio
			if (radio >= 0) {
				console.log(list[radio], "让让让")
				if (list[radio].V_PrivilegeWay === 0) {
					this.CouponPrivilegeValue = ((1 - list[radio].CouponPrivilegeValue / 100) * this.price).toFixed(2)
				} else {
					this.CouponPrivilegeValue = list[radio].CouponPrivilegeValue
				}
				this.couponValue = this.CouponPrivilegeValue
				if (list[radio].V_PrivilegeWay === 4 && list[radio].CouponPrivilegeValue > this.total) {
					this.couponValue = this.total
				}
				this.minOrderPrice = list[radio].V_OrderPrice || 0
				this.requestData2.CouponDetailId = list[radio].DetailId
				this.requestData2.CouponId = list[radio].ID
			}
		},


		onConfirm(value, index) {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if (value[0].indexOf('今天') !== -1) {
				var strDate = date.getDate();
			} else {
				var strDate = date.getDate() + 1;
			}
			if (strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var day = year + "-" + month + "-" + strDate
			const time = value[1]
			this.serviceTime = day + " " + time
			this.IsMustCar = this.columns[index[0]].children[index[1]].IsMustCar
			this.timeSelect = false
			if (this.IsMustCar) {
				this.radio = '0'
			}
			this.CalculateBookHomeOrderTripCost()
		},
		onCancel() {
			this.timeSelect = false
		},

		//提交订单
		submitOrder() {
			if (this.Lng === 0 || this.Lat === 0) {
				this.$toast("请先定位")
				return false
			}
			if (this.serviceTime === '请选择服务时间') {
				this.$toast("请选择服务时间")
				return false
			}
			const _obj = {}
			_obj.artificerUserId = this.id
			_obj.bookTime = this.serviceTime
			_obj.tripType = this.radio
			_obj.addressId = this.requsetData.addressId
			_obj.couponId = this.requestData2.CouponId
			_obj.couponMoney = this.couponValue
			_obj.orderRemark = this.orderRemark
			if (this.totalPay < 0) {
				this.$toast('订单金额需大于等于0')
			} else {
				SubmitBookHomeOrder(_obj).then(res => {
					if (res.Data) {
						if (res.Data.PriceSum === 0) {
							this.$router.push({
								path: 'physioList',
							})
						} else {
							window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + res.Data.OrderId + '&&singleflag=1&&isBookHomeOrder=1'
						}

					}
				})
			}
		}
	},


})
</script>
<style lang="scss" scoped>
.nav-top {
	width: 750px;
	height: 350px;
	background: #24c373;

	img {
		width: 40px;
		height: 40px;
		margin-right: 16px;
	}
}

.nav_address {
	border-radius: 16px;
	padding: 24px;

	.address {
		border-bottom: 2px solid #F2F3FC;
		display: flex;
		align-items: center;

		span {
			border-right: 1px solid #F2F3FC;
			padding-right: 8px;
			margin-right: 8px;
		}
	}

	.address_msg {
		display: flex;
		width: calc(100% - 28px);
		justify-content: space-between;
	}

	.serve_time {
		border-bottom: 2px solid #F2F3FC;
		display: flex;
		align-items: center;
	}

	.fs-28 span {
		margin-right: 60px;
	}

	.serves {
		display: flex;
		align-items: center;

		span {
			margin-right: 60px;
		}
	}

	.classImg {
		width: 72px;
		height: 72px;
		margin-right: 24px;

		img {
			border-radius: 100%;
		}
	}
}

.btn {
	width: 224px;
	line-height: 72px;
	border-radius: 36px;
}

.order-price {
	color: #34267F;
}

.ordermsg_total {
	color: #EC612A;
	;
}

.travel {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pb-220 {
	padding-bottom: 220px;
}

.placeorder {
	width: 224px;
	height: 72px;
	background: #24c373;
	border-radius: 36px;
	text-align: center;
	font-size: 28px;
}

.remark {
	background: #f7f7f7;
}

.travel-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.service_item {
	display: flex;
	justify-content: space-between;
	border-bottom: 2px solid #F2F3FC;
}

.service_name {
	font-size: 32px;
	color: $black2;
	margin-bottom: 12px;
}

.mt-46 {
	margin-top: 46px;
}

.pricenum {
	display: flex;
	align-items: center;
	height: 42px;
	line-height: 42px;
	color: #EC612A;
}

.service_price {
	font-size: 36px;
	font-weight: bold;
	margin-right: 18px;
}

.service_content {
	width: calc(100% - 224px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.right-box-text span {
	background-color: #F2F3FC;
	padding: 4px 8px;
	border-radius: 4px;
	text-align: center;
	margin-right: 10px;
}

.right-box-text span:last-child {
	margin-right: 0;
}

.service_img {
	width: 224px;
	height: 180px;
}

.classImg {
	width: 224px;
	height: 180px;
}

.coupon-box {
	/deep/.van-tabs__line {
		@include bg-primary();
	}

	/deep/.van-hairline--top-bottom:after {
		border-width: 0 0 2px 0;
	}

	/deep/.van-icon {
		border-color: #24c373;
	}

	/deep/.van-radio__icon--checked .van-icon {
		@include bg-primary();
		border-radius: 100%;
	}

	/deep/.van-button::before,
	/deep/.van-button {
		border-color: currentColor;
	}
}

/* 优惠券列表 */
.coupon-list {
	position: relative;
	max-height: 660px;
	overflow: scroll;

	.coupon-item {
		.item {
			width: 686px;
			height: 180px;
			background-size: 100% 100%;

			.left-box {
				width: 210px;
				height: 100%;
				color: #FDE8AE;
			}
		}
	}
}

.remain-num {
	bottom: 0;
	right: 30px;
}

.solid-btn {
	background: $physio-primary1;
}

/deep/.van-tab--active {
	color: #24c373;
}

/deep/ .coupon-box .van-tabs__line {
	background: #24c373 !important;
}

.h-86 {
	height: 86px;
	line-height: 86px;
}
</style>
